<template>
  <div>
    <common-head title="订单页"/>
    <div class="order-main">
      <!-- 联系人卡片 -->
      <van-contact-card
      :type="cardType"
      :name="currentOrder.contact.name"
      :tel="currentOrder.contact.tel"
      @click="chooseContact"
    />
    </div>
    <div class="items">
      <van-card
        v-for= 'item in currentOrder.items'
        :key="item.id"
        :num="item.num"
        :price="item.minPrice"
        :title="item.name"
        :thumb="item.pic"
        >
      </van-card>
    </div>
    <van-submit-bar :price="currentOrder.total*100" button-text="提交订单" @submit="onSubmit" />
  </div>
</template>

<script>
import CommonHead from '@components/CommonHead'
import { mapState, mapMutations } from 'vuex'
export default {
  data () {
    return {
      cardType: 'add'
    }
  },
  created () {
    this.initContact()
  },
  methods: {
    initContact () {
      // 订单联系人
      /*
      1，如果联系人列表中 没有联系人 直接 cardType为add
      */
      // 当前订单的contact 如果已经有了联系人 （点击切换联系人回来的时候）
      if (this.currentOrder.contact.name) {
        this.cardType = 'edit'
        return
      }
      if (this.contacts.length === 0) {
        this.cardType = 'add'
        return
      }
      // 查找 默认联系人 如果没有  取第一个
      this.cardType = 'edit'
      let currentContact = this.contacts.find(contact => contact.isDefault)
      if (!currentContact) {
        currentContact = this.contacts[0]
      }
      this.setOrderContact(currentContact)
    },
    chooseContact () {
      if (this.cardType === 'edit') {
        this.$router.push('/addressLists')
      } else {
        // 添加联系人
        this.$router.push('/addContact')
      }
    },
    onSubmit () {
      alert('购买成功')
    },
    ...mapMutations(['setOrderContact'])
  },
  computed: {
    ...mapState(['currentOrder', 'contacts'])
  },
  components: {
    CommonHead
  }
}
</script>

<style lang="scss" scoped>
.order-main{
  padding-top: 46px;
  padding-bottom: 48px;
}
</style>
